<!-- 成本评审明细table -->
<template>
	<!-- <div>
		以梦为马不负韶华{{ scope123 }}
		子组件双向绑定父组件的值,如果后期有需要,使用pinia进行数据处理!!
		<el-input v-model="scope123.data.formData[scope123.data.item.key]" :placeholder="scope.data.item.placeHolder" />
	</div> -->
	<!-- <div>{{ scope123.data }}</div> -->

	<div class="test">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }" style="margin-top: 0px">
			<div style="justify-content: center; margin-bottom: 10px" :class="{ hiddenAction: hiddenAction, flexAction: !hiddenAction }">
				<el-button class="icon-e" icon="ele-CirclePlus" type="primary" @click="addClick" size="small"> {{ $t('tianJiaYuanGong') }} </el-button>
				<el-button class="icon-e" icon="ele-Remove" type="danger" @click="delClick" size="small"> {{ $t('yiChuYuanGong') }} </el-button>
			</div>
			<v-table :data-list="scope123.data.formData[scope123.data.item.key]" v-bind="staffActionTableConfig">
				<template #staffID="scope">
					<!-- <el-input size="small" v-model="scope.row[scope.prop.slotName]" :placeholder="`请输入${scope.prop.label}`" style="margin-bottom: 1px" /> -->
					<el-form-item :class="{ disableBack: hiddenAction, disableText: hiddenAction }">
						<el-select
							:disabled="hiddenAction"
							v-model="scope.row[scope.prop.slotName]"
							filterable
							remote
							reserve-keyword
							:remote-show-suffix="true"
							:placeholder="$t('keShuRuGuanJianZiChaZhao')"
							:remote-method="selectRemoteMethod"
							@change="(params: any) =>{ changeAction(params, scope.row)}"
							@focus="selectRemoteMethod"
							style="width: 100%"
							:loading="false"
						>
							<el-option v-for="item in options" :key="item.jobNum" :label="item.jobNum" :value="item.jobNum">
								<!-- 在这里设置option 下拉框样式	 -->
								{{ `${item.name}     工号: ${item.jobNum}` }}
							</el-option>
						</el-select>
					</el-form-item>
				</template>
				<template #staffName="scope">
					<el-form-item class="disableBack disableText">
						<el-input size="small" v-model="scope.row[scope.prop.slotName]" style="margin-bottom: 1px" :disabled="true" />
					</el-form-item>
				</template>
				<template #dutyHours="scope">
					<el-form-item :class="{ disableBack: hiddenAction, disableText: hiddenAction }">
						<el-input :disabled="hiddenAction" size="small" v-model="scope.row[scope.prop.slotName]" :placeholder="$t('tBitianxiang')" style="margin-bottom: 1px" type="number" :min="0" :max="8" />
					</el-form-item>
				</template>
				<template #extraHours="scope">
					<el-form-item :class="{ disableBack: hiddenAction, disableText: hiddenAction }">
						<el-input :disabled="hiddenAction" size="small" v-model="scope.row[scope.prop.slotName]" :placeholder="$t('tBitianxiang')" style="margin-bottom: 1px" type="number" :min="0" :max="16" />
					</el-form-item>
				</template>
				<template #footer><div></div> </template>
			</v-table>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { defineProps, reactive, ref } from 'vue';
import { staffActionTableConfig } from '../config/table/index';
import vTable from '/@/components/table/v-table.vue';
import commonRequest from '/@/api/common/common';

interface ListItem {
	id: String | number;
	name: String | number;
	jobNum: String | number;
	orgId: String | number;
	orgName: String | number;
}
const options = ref<ListItem[]>([]);

//  select 远程搜索
const selectRemoteMethod = async (query: string) => {
	const res: any = await commonRequest.getUserList({ SearchValue: query });
	options.value = res.data;
	return options;
};
const changeAction = (seleted: any, item: any) => {

	// let options: any[] = item.options;
	let filterItem: any = options.value.find((item: any) => {
		return seleted === item.jobNum;
	});
	item.staffID = filterItem.jobNum;
	item.staffName = filterItem.name;
};

const addClick = () => {

	scope123.data.formData[scope123.data.item.key].push({
		StaffID: '',
		StaffName: '',
		DutyHours: '',
		ExtraHours: '',
	});
};
const delClick = () => {
	if (scope123.data.formData[scope123.data.item.key].length == 1) {
		return;
	}
	
	scope123.data.formData[scope123.data.item.key].pop();
};

const prop = defineProps({
	scope: {
		type: Object,
		default: () => ({}),
	},
	hiddenAction: {
		type: Boolean,
		default: false,
	},
});
const scope123 = reactive(prop.scope);

</script>

<!-- scoped属性使style有自己独立的作用域(属性选择器实现 title[data-v-xxx]) -->
<style scoped lang="scss">
.hiddenAction {
	display: none;
}
.flexAction {
	display: flex;
}
.el-select-dropdown__item {
	font-size: 12px;
	color: #666666;
}
:deep(.el-form-item__content) {
	margin-left: 0px !important;
}
.disableBack {
	:deep(.el-input.is-disabled .el-input__wrapper) {
		background-color: white;
		color: #030303;
	}
}
.disableText {
	:deep(.el-input.is-disabled .el-input__inner) {
		-webkit-text-fill-color: #030303;
	}
}
</style>
